<template>
	<b-layout-index>


		<view class="container" id="app">
			<!-- 顶部导航 -->

			<theme-color-bg type="c3">
				<navbar :isStyle="light" :isAvatar="true" :isAvatarSlot="true" :title="$t('工作台')"></navbar>
				<!-- 商家信息 -->
				<view class="merchant">
					<view class="merchant-info">
						<image :src="settingsKey.logoUrl" class="merchant-avatar" />
						<view class="merchant-detail">
							<text class="merchant-name">{{settingsKey.about}}</text>
							<text class="merchant-id">{{$t('手机号')}}：{{userInfo.phone}}</text>
						</view>
					</view>
				</view>
			</theme-color-bg>
			<!-- 功能区 -->
			<view class="menu">
				<view v-for="(item, index) in menuItems" :key="index" class="menu-item" @click="goClick(item)">
					<view :class="['menu-icon-wrapper', item.bgClass]">
						<iconfont :icon="item.icon" size="24" color="#FFFFFF" />
						<text v-if="item.badge" class="badge">{{ item.badge }}</text>
					</view>
					<text class="menu-title">{{ $t(item.title) }}</text>
				</view>
			</view>
			<!-- 数据统计 -->
			<view class="stats">

				<!-- 销售统计 -->
				<view class="sales" v-for="(item,index) in dataBase">
					<view class="sales-header">
						<text>{{$t(item.title)}}</text>
						<!-- 	<view class="sales-more">
							<text class="sales-more-text">全部</text>
							<uni-icons type="right" size="14" color="#999999" />
						</view> -->
					</view>
					<!-- 		<view class="sales-tabs">
						<view v-for="(tab, index) in salesTabs" :key="index"
							:class="['sales-tab', activeSalesTab === tab.value ? 'sales-tab-active' : '']"
							@tap="activeSalesTab = tab.value">
							<text>{{ tab.label }}</text>
						</view>
					</view> -->
					<view class="sales-data">
						<view class="sales-card" v-for="(itema,indexa) in item.list">
							<view class="sales-value"><u--text :mode="itema.mode" align="center"
									:text="showStatstca[item.key][itema.key]"></u--text></view>
							<text class="sales-label">{{$t(itema.title)}}</text>
						</view>
						<!-- 	<view class="sales-card">
							<text class="sales-value">¥3285.47</text>
							<text class="sales-label">销售额</text>
						</view> -->
					</view>
				</view>
			</view>
		</view>

	</b-layout-index>

</template>

<script>
	import * as echarts from 'echarts';
	import {
		getHomeChartStastic
	} from "@/api/stastica.js"
	export default {
		data() {
			let settingsKey = uni.getStorageSync("settingsKey")
			return {
				settingsKey,
				baseList: [{
						icon: 'icon-dingdan',
						title: '订单消息',
						color: "#62b7fc"
					},

					{
						icon: 'icon-qianbao1',
						title: '提现申请',
						color: "#f77678",
						url: "../finance/withdrawal/index"
					},
					{
						icon: 'icon-wanchengdingdan',
						title: '代理管理',
						color: "#51db9f",
						url: "../users/agent"
					},
					{
						icon: 'icon-yonghu',
						title: '用户管理',
						color: "#2157f2",
						url: "../users/index"
					}
				],

				dataBase: [{
					title: "金额统计",
					key: "wallet",
					list: [{
							title: "收入余额",
							value: 25,
							key: "price",
							mode: "price",
							type: "warning"
						},
						{
							title: "现在余额",
							value: 45.2,
							key: "priceLog",
							mode: "price",
							type: "warning"
						},
					]
				}, {
					title: "提现统计",
					key: "withdrawal",
					list: [{
							title: "提现总额",
							value: 25,
							key: "price",
							mode: "price",
							type: "warning"
						},
						{
							title: "待审核",
							value: 45.2,
							key: "wait",
							mode: "price",
							type: "warning"
						},
					]
				}, {
					title: "订单统计",
					key: "order",
					list: [{
							title: "订单总数",
							value: 25,
							key: "count"
						},
						{
							title: "待发货",
							value: 45.2,
							key: "shipments"
						},
					]
				}, {
					title: "用户统计",
					key: "user",
					list: [{
							title: "用户总数",
							value: 25,
							key: "users"
						},
						{
							title: "代理总数",
							value: 45.2,
							key: "agent"
						},
					]
				}],
				showStatstca: {},
				avatarUrl: 'https://ai-public.mastergo.com/ai/img_res/d63f047bfa92e2389b5b3a0fbe145621.jpg',
				activeTimeTab: 'today',
				activeSalesTab: 'total',
				menuItems: [{
						title: '订单',
						icon: 'icon-gouwudai1',
						bgClass: 'bg-blue',
						badge: 0
					},
					{
						title: '审核',
						icon: 'icon-biaoqian1',
						bgClass: 'bg-green',
						badge: 0,
						url:"/page/manager/pages/agent/add"
					},
					{
						title: '提现',
						icon: 'icon-qianbao2',
						bgClass: 'bg-red',
						badge: 0,
						url: "../finance/withdrawal/index"
					},
					{
						title: '记录',
						icon: 'icon-danju',
						bgClass: 'bg-yellow',
						badge: 0,
						url: "../finance/log/index"
					},
					{
						title: '代理',
						icon: 'icon-wode',
						bgClass: 'bg-purple',
						badge: 0,
						url: "../users/index"
					},
				],
				timeTabs: [{
						label: '今日',
						value: 'today'
					},
					{
						label: '昨日',
						value: 'yesterday'
					},
					{
						label: '7日',
						value: '7days'
					},
					{
						label: '30日',
						value: '30days'
					},
				],
				salesTabs: [{
						label: '汇总',
						value: 'total'
					},
					{
						label: '今日',
						value: 'today'
					},
					{
						label: '昨日',
						value: 'yesterday'
					},
					{
						label: '7日',
						value: '7days'
					},
					{
						label: '30日',
						value: '30days'
					},
				]
			}
		},
		mounted() {
			const chartRef = this.$refs.chartRef;
			if (chartRef) {
				const myChart = echarts.init(chartRef);
				const option = {
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						top: '3%',
						containLabel: true
					},
					xAxis: {
						type: 'category',
						data: ['0', '4', '8', '12', '16', '20', '24'],
						axisLine: {
							lineStyle: {
								color: '#eee'
							}
						}
					},
					yAxis: {
						type: 'value',
						axisLine: {
							show: false
						},
						splitLine: {
							lineStyle: {
								color: '#eee'
							}
						}
					},
					series: [{
						data: [820, 932, 901, 934, 1290, 1330, 1320],
						type: 'line',
						smooth: true,
						symbolSize: 8,
						lineStyle: {
							color: '#3b82f6'
						},
						itemStyle: {
							color: '#3b82f6'
						},
						areaStyle: {
							color: {
								type: 'linear',
								x: 0,
								y: 0,
								x2: 0,
								y2: 1,
								colorStops: [{
									offset: 0,
									color: 'rgba(59,130,246,0.2)'
								}, {
									offset: 1,
									color: 'rgba(59,130,246,0)'
								}]
							}
						}
					}]
				};
				myChart.setOption(option);
			}
		},
		onLoad: function() {

			this.getDataStatstica()
		},
		methods: {
			click(name) {
				this.$refs.uToast.success(`点击了第${name}个`)
			},
			getDataStatstica: function() {
				getHomeChartStastic().then(res => {
					console.log(res)
					this.showStatstca = res
				})
			},
			goClick: function(item) {
				console.log(item)
				if (item.url) {
					uni.navigateTo({
						url: item.url
					})
				}
			}
		}
	}
</script>

<style>
	.grid-text {
		margin-top: 10px;
	}

	.grid-value {
		color: #7e9c52;
	}

	page {
		height: 100%;
		background-color: #f5f5f5;
	}

	.container {
		min-height: 100%;
	}

	.mr-20 {
		margin-right: 20px;
	}

	.merchant {
		position: relative;
	}

	.merchant-bg {
		height: 100rpx;

	}

	.merchant-info {

		left: 0;
		right: 0;
		top: 0;
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
	}

	.merchant-avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		border: 4rpx solid #FFFFFF;
	}

	.merchant-detail {
		margin-left: 20rpx;
		margin-left: 10px;
		display: grid;
		padding: 10px;
	}

	.merchant-name {
		color: #FFFFFF;
		font-size: 36rpx;
	}

	.merchant-id {
		color: rgba(255, 255, 255, 0.8);
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	.menu {
		display: flex;
		padding: 40rpx 30rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}

	.menu-item {
		flex: 1;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.menu-icon-wrapper {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
	}

	.bg-blue {
		background-color: #3b82f6;
	}

	.bg-green {
		background-color: #22c55e;
	}

	.bg-red {
		background-color: #ef4444;
	}

	.bg-yellow {
		background-color: #eab308;
	}

	.bg-purple {
		background-color: #a855f7;
	}

	.badge {
		position: absolute;
		right: -8rpx;
		top: -8rpx;
		background-color: #ef4444;
		color: #FFFFFF;
		font-size: 20rpx;
		width: 32rpx;
		height: 32rpx;
		border-radius: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.menu-title {
		margin-top: 12rpx;
		font-size: 20rpx;
		color: #666666;
	}

	.stats {
		background-color: #FFFFFF;
		margin-top: 20rpx;
		padding: 30rpx;
	}

	.stats-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.stats-title {
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
	}

	.ml-10 {
		margin-left: 10rpx;
	}

	.vconsole-btn {
		background-color: #22c55e;
		color: #FFFFFF;
		font-size: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 8rpx;
	}

	.time-tabs {
		display: flex;
		background-color: #f5f5f5;
		border-radius: 100rpx;
		padding: 4rpx;
		margin-bottom: 30rpx;
	}

	.time-tab {
		flex: 1;
		text-align: center;
		padding: 16rpx 0;
		font-size: 24rpx;
		color: #666666;
	}

	.time-tab-active {
		background-color: #3b82f6;
		color: #FFFFFF;
		border-radius: 100rpx;
	}

	.chart {
		width: 100%;
		height: 400rpx;
	}

	.sales {
		margin-top: 40rpx;
	}

	.sales-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.sales-more {
		display: flex;
		align-items: center;
	}

	.sales-more-text {
		font-size: 24rpx;
		color: #999999;
		margin-right: 8rpx;
	}

	.sales-tabs {
		display: flex;
		background-color: #f5f5f5;
		border-radius: 100rpx;
		padding: 4rpx;
		margin-bottom: 30rpx;
	}

	.sales-tab {
		flex: 1;
		text-align: center;
		padding: 16rpx 0;
		font-size: 24rpx;
		color: #666666;
	}

	.sales-tab-active {
		background-color: #3b82f6;
		color: #FFFFFF;
		border-radius: 100rpx;
	}

	.sales-data {
		display: flex;
		gap: 20rpx;
	}

	.sales-card {
		flex: 1;
		background-color: #f5f5f5;
		border-radius: 16rpx;
		padding: 30rpx;
		display: grid;
		text-align: center;
	}

	.sales-value {
		font-size: 40rpx;
		font-weight: 600;
		color: #333333;
	}

	.sales-label {
		font-size: 24rpx;
		color: #666666;
		margin-top: 8rpx;
	}
</style>